<template>
	<view class="walk-color">
		<view class="hd_jn" @click="jnshowfun">
			<image src="/static/images/hd_jn.png"></image>
			<view class="hd_jn-text">
				活动规则
			</view>
		</view>
		<view class="walk-jd" v-if="jdtshhow">

			<u-circle-progress inactive-color="#4bcbff" :percent="percentnum" bg-color="rgba(255,255,255,0)" width="500"
				active-color="#ffffff">
				<view class="u-progress-content">
					<view class="u-progress-dot">今日步数</view>
					<view class='u-progress-num'>{{toDayStep}}</view>
					<!-- <view class='u-progress-info'>查看排行榜</view> -->
				</view>
			</u-circle-progress>

		</view>

		<view class="content-sj" v-if="jdtshhow">
			<view class="content-sj-item">
				<view class="content-sj-item-num">
					<text>{{kilometer}}</text><text>km</text>
				</view>
				<view class="content-sj-item-title">
					公里数
				</view>
			</view>
			<view class="content-sj-item">
				<view class="content-sj-item-num">
					<text>{{energy}}</text><text>cal</text>
				</view>
				<view class="content-sj-item-title">
					消耗卡路里
				</view>
			</view>
			<view class="content-sj-item">
				<view class="content-sj-item-num">
					<text>{{stepDay}}</text><text>day</text>
				</view>
				<view class="content-sj-item-title">
					达标天数
				</view>
			</view>
		</view>

		<view class="bt-dk" @click="cjfun" v-if="reachFlag==1&&jdtshhow">
			达标打卡
		</view>

		<cover-view class="popup" v-if="showpopup">
			<cover-view class="popup-k">
				<cover-image src="/static/images/Popup.png" mode="widthFix"></cover-image>
				<cover-view class="bt" @click="goshop">
					进入商城
				</cover-view>
			</cover-view>

		</cover-view>
		<!-- <u-popup  v-model="failshow" mode="center" border-radius="35"  @close="failclose" @open="failopen" :closeable="true" :overlay="true">
		      <cover-view class="fail-k">
		          <cover-view class="fail-title">
		          	温馨提示
		          </cover-view>
					 <cover-view class="fail-content">
					 	您已参与过活动，且积分已发放
					 </cover-view>
					 <cover-view class="fail-bt">
					 	查看积分
					 </cover-view>
		      </cover-view>
		 	</u-popup> -->


		<cover-view class="popup" v-if="failshow">
			<cover-view class="fail-k">
				<cover-view class="fail-title">
					温馨提示
				</cover-view>
				<cover-view class="fail-content">
					您已参与过活动，且积分已发放
				</cover-view>
				<cover-view class="fail-bt">
					查看积分
				</cover-view>
			</cover-view>

		</cover-view>

		<!-- <u-popup  v-model="noinshow" mode="center" border-radius="35"  @close="failclose" @open="failopen" :closeable="true" :overlay="true">
		      <cover-view class="fail-k">
		          
		      </cover-view>
		 	</u-popup> -->
		<cover-view class="popup" v-if="noinshow" @click="failclose">
			<cover-view class="fail-k jnshow-k jnshow-k-tb" @click.stop>
				<cover-view class="fail-icon-img" @click="failclose">
					<cover-image src="/static/images/icon-closs.png"></cover-image>
				</cover-view>

				<cover-view class="fail-title">
					对不起暂无活动资格
				</cover-view>
				<cover-view class="fail-content">
					请联系客服咨询
				</cover-view>
				<cover-view class="fail-bt" @click="gohome">
					首页
				</cover-view>

			</cover-view>

		</cover-view>

		<cover-view class="popup" v-if="norsshow" @click="failclose">
			<cover-view class="fail-k jnshow-k jnshow-k-tb" @click.stop>
				<cover-view class="fail-icon-img" @click="failclose">
					<cover-image src="/static/images/icon-closs.png"></cover-image>
				</cover-view>

				<cover-view class="fail-title">
					温馨提示
				</cover-view>
				<cover-view class="fail-content">
					活动人数已满
				</cover-view>
				<cover-view class="fail-bt" @click="gohome">
					首页
				</cover-view>

			</cover-view>

		</cover-view>


		<!-- <u-popup  v-model="jnshow" mode="center" border-radius="35"   @close="jnshowclose" @open="jnshowopen"  :closeable="true">
			     <view class="fail-k jnshow-k">
			         <view class="fail-title jnshow-title">
			         	活动介绍
			         </view>
			     						 <view class="fail-content jnshow-content" v-html="shuoming">
			     						 </view>
			     						 
			     </view>
			 	</u-popup> -->

		<u-popup v-model="jnshow" mode="center" border-radius="35" @close="jnshowclose" @open="jnshowopen"
			:closeable="true" :mask-custom-style="{'background': 'rgba(0, 0, 0, 0.8)'}">
			<view class="fail-k jnshow-k">
				<view class="fail-title jnshow-title">
					活动介绍
				</view>
				<view class="fail-content jnshow-content" v-html="shuoming">
				</view>

			</view>
		</u-popup>

		<u-popup v-model="payshow" mode="center" border-radius="15" @close="jnshowclose" @open="jnshowopen"
			:closeable="false" :mask-close-able="false" :mask-custom-style="{'background': 'rgba(0, 0, 0, 0.8)'}">
			<view class="fail-k payshow-k">
				<view class="fail-title jnshow-title">
					活动介绍
				</view>
				<view class="fail-content jnshow-content" v-html="shuoming">
				</view>
				<view class="payshow-bt">
					<button @click="jnshowclose">我已知晓以上活动内容</button>
				</view>
			</view>

		</u-popup>


		<!-- <cover-view class="jnshow" v-if="jnshow" >
					
					
				</cover-view> -->
		<!-- <cover-view class="popup" v-if="jnshow" @click="clossjnshow">
					<cover-view class="fail-k jnshow-k jnshow-k-tb" @click.stop>
						<cover-view class="fail-icon-img" @click="clossjnshow">
							<cover-image src="/static/images/icon-closs.png"></cover-image>
						</cover-view>
						
					    <cover-view class="fail-title jnshow-title">
					    	活动介绍
					    </cover-view>
							<cover-view class="fail-content jnshow-content" v-html="shuoming">
								 
						 </cover-view>
						 <cover-view class="fail-content jnshow-content">
							 
						 								 <mp-html :content="shuoming"/>
							<cover-view >
								{{shuoming}}
							</cover-view>
														
						
						 </cover-view>
											 
					</cover-view>
					
				</cover-view> -->



	</view>

</template>

<script>
	import {
		getSessionKey,
		grantWxStep,
		getActivityDetails,
		beginActivity,
		punchActivity
	} from "@/api/index/index";
	import {
		BASE_URL_IMAHE
	} from "../../../utils/https";

	const app = getApp();
	export default {
		data() {
			return {
				show: true,
				form: {
					userRef: "",
				},
				toall: 0,
				historylist: [],
				imgurl: BASE_URL_IMAHE,
				token: "",
				toDayStep: "0",
				kilometer: "0",
				energy: "0",
				stepDay: "0",
				reachFlag: 0,
				showpopup: false,
				jumpShopLink: "",
				noinshow: false,
				failshow: false,
				jnshow: false,
				norsshow: false,
				shuoming: "",
				sportStep: 0,
				percentnum: 0,
				jdtshhow: false,
				payshow: false,

			};
		},

		created() {},
		beforeDestroy() {

		},
		onLoad(options) {

			var sjs = this.randomWord()
			var datatime = Date.parse(new Date());
			var tokens = '' + sjs + '' + datatime
			this.token = tokens
			//   this.type=uni.getStorageSync("type")
			//   this.form.v=uni.getStorageSync("v")
			if (!options.activityId) {
				// 跳转回原页面
				if (getCurrentPages().length == 1) {
					uni.reLaunch({
						url: "/pages/index/index"
					})
				} else {
					uni.navigateBack({
						delta: 1,
					});
				}


			} else {
				this.form.activityId = options.activityId
				this.form.userRef = uni.getStorageSync("userRef")
				this.getlist()
			}



			console.log(uni.getStorageSync("userRef"), this.form.userRef, "this.form.userRef")



		},
		onShow() {
			if (!uni.getStorageSync("sessionKey")) {
				this.login()
			} else {
				this.login()
				// this.getgrantWxStep()
			}
		},

		onReady() {

		},
		onReachBottom() {
			// console.log("到底部 加载更多");
			// //请求订单
			// if(this.form.pageNo>this.toall){
			//  return
			// }
			// this.getlist()
		},
		methods: {
			jnshowopen() {

			},
			jnshowclose() {
				this.jdtshhow = true
				this.payshow = false

			},
			clossjnshow() {
				this.jnshow = false
			},
			jnshowfun() {
				this.jdtshhow = false
				this.jnshow = true
			},

			gohome() {
				uni.reLaunch({
					url: "/pages/home/index"
				})
			},
			failclose() {
				if (getCurrentPages().length == 1) {
					uni.reLaunch({
						url: "/pages/home/index"
					})
				} else {
					uni.navigateBack({
						delta: 1,
					});
				}
			},
			failopen() {

			},
			async cjfun() {
				// this.showpopup=true
				// return
				var data = {
					activityId: this.form.activityId,
					whiteListId: this.whiteListId,
					joinRecordId: this.joinRecordId,
					userRef: this.form.userRef,
					token: this.token,
					sportStep: this.toDayStep,

				}
				var res = await punchActivity(JSON.stringify(data))
				if (res.result == 0) {
					this.showpopup = true
					this.jumpShopLink = res.jumpShopLink
				}

			},
			goshop() {

				// console.log("sdsadsas",this.jumpShopLink)
				uni.setStorageSync("typejumpShopLink", this.jumpShopLink)
				uni.redirectTo({
					url: "/pages/shop/index"
				})
			},

			login() {
				let that = this
				uni.login({
					provider: "weixin",
					success: async (codeData) => {
						console.log(codeData)
						var res = await getSessionKey(JSON.stringify({
							code: codeData.code
						}))
						console.log(res)
						if (res.result == 0) {
							uni.setStorageSync("sessionKey", res.sessionKey)
							that.getgrantWxStep()
						}

					},
					fail: (err) => {
						console.log(err, "登录错误");
					},
				});
			},
			async getlist() {



				// 		const res=await getHistoryPage(JSON.stringify(this.form))
				// 		console.log(res)
				// this.toall=Math.ceil(res.page.count/res.page.pageSize)
				// this.historylist.push(...res.page.list)
				// this.form.pageNo++
			},
			async getgrantWxStep() {
				var that = this
				wx.getWeRunData({
					success: async (res) => {
						// 拿 encryptedData 到开发者后台解密开放数据
						const encryptedData = res.encryptedData
						// 或拿 cloudID 通过云调用直接获取开放数据
						const cloudID = res.cloudID
						console.log(res)
						const resindex = await beginActivity(JSON.stringify(that.form))

						if (resindex.result == 0) {
							that.joinRecordId = resindex.activity.joinRecordId
							that.sportStep = resindex.activity.sportStep
							that.whiteListId = resindex.activity.whiteListId
							that.getdataobj(res.encryptedData, res.iv)
							that.shuoming = resindex.activity.rule
							// that.shuoming="<!--HTML--><p>1dsfsdfasdfsdad</p>"

							this.jdtshhow = false
							this.payshow = true




						} else if (resindex.result == -100) {
							// -100 不在活动白名单
							that.noinshow = true

						} else if (resindex.result == -101) {
							// -101 已参与活动
							that.failshow = true

						} else if (resindex.result == -102) {
							// -101 已参与活动
							this.norsshow = true

						} else {
							uni.showToast({
								title: "数据错误",
								icon: "none"
							})
						}
					},
					fail(rej) {
						console.log(rej)
						uni.showToast({
							title: "您未开启微信运动",
							icon: "none"
						})
						setTimeout(() => {
							that.nextpagefun()
						}, 2000)

					}
				})

				// var res= await grantWxStep(JSON.stringify({code:codeData.code}))

			},
			async getdataobj(encryptedData, iv) {
				var dataobj = {
					sessionKey: uni.getStorageSync("sessionKey"),
					whiteListId: this.whiteListId,
					token: this.token,
					encryptedData: encryptedData,
					iv: iv,
				}
				var res = await grantWxStep(JSON.stringify(dataobj))
				if (res.result == 0) {
					console.log(res)


					this.toDayStep = res.toDayStep //今日步数
					this.kilometer = res.kilometer //公里数(km)
					this.energy = res.energy //消耗能量
					this.stepDay = res.stepDay //累计打卡天数
					this.reachFlag = res.reachFlag //是否达标 1是  0否
					this.jumpShopLink = res.jumpShopLink

					if (this.sportStep < this.toDayStep) {
						this.percentnum = 100
					} else {
						this.percentnum = Math.floor(this.toDayStep / this.sportStep * 100)
					}

					if (this.reachFlag == 1) {
						var sjs = this.randomWord()
						var datatime = Date.parse(new Date());
						var tokens = '' + sjs + '' + datatime
						this.token = tokens
					}

				} else {
					var sjs = this.randomWord()
					var datatime = Date.parse(new Date());
					var tokens = '' + sjs + '' + datatime
					this.token = tokens
				}
			},
			nextpagefun() {
				// 跳转回原页面
				uni.navigateBack({
					delta: 1,
				});
			},
			homepagefun() {

			},
			randomWord() {
				var chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I',
					'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c',
					'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w',
					'x', 'y', 'z'
				];
				var nums = "";
				for (var i = 0; i < 20; i++) {
					var id = parseInt(Math.random() * 61);
					nums += chars[id]
				}
				return nums;
			},

		}


	};
</script>

<style scoped lang="scss">
	.hd_jn {
		position: absolute;
		top: 49rpx;
		right: 36rpx;
		z-index: 10;
		font-size: 20rpx;
		text-align: center;
		color: #39393d;

		image {
			width: 90rpx;
			height: 92rpx;
			margin-bottom: 10rpx;
		}
	}

	.walk-color {
		width: 100%;
		height: 100vh;
		background: linear-gradient(to bottom, #318fff, #3ce4ff);

		.walk-jd {

			margin-top: 0 auto;
			display: flex;
			justify-content: center;
			align-items: center;
			padding-top: 300rpx;
		}

	}

	.u-progress-content {
		// background-color: red;
		text-align: center;


		.u-progress-dot {
			font-size: 36rpx;
			color: #ffffff;
		}

		.u-progress-num {
			font-size: 100rpx;
			color: #ffffff;
			margin-top: 20rpx;

		}

		.u-progress-info {
			margin: 10rpx auto;
			width: 200rpx;
			height: 60rpx;
			line-height: 60rpx;
			background-color: #ffffff;
			font-size: 32rpx;
			border-radius: 25rpx;
			color: #3d76b9;

		}
	}

	.content-sj {
		display: flex;
		justify-content: center;
		margin-top: 20rpx;

		.content-sj-item {
			padding: 0rpx 40rpx;
			text-align: center;
		}

		.content-sj-item:nth-child(1) {
			border-right: 1rpx solid #ffffff;
		}

		.content-sj-item:nth-child(2) {
			border-right: 1rpx solid #ffffff;
		}

		.content-sj-item-num {
			text:first-child {
				font-size: 58rpx;
				color: #ffffff;
			}

			text:last-child {
				font-size: 30rpx;
				color: #ffffff;
			}
		}

		.content-sj-item-title {
			font-size: 24rpx;
			color: #ffffff;
		}
	}

	.bt-dk {
		width: 300rpx;
		height: 95rpx;
		background-color: #ffffff;
		border-radius: 50rpx;
		font-size: 46rpx;
		font-weight: bold;
		color: #3873b8;
		text-align: center;
		line-height: 95rpx;
		margin: 125rpx auto 0rpx;
	}

	.popup {
		position: fixed;
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.5);
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 99999;

		.popup-k {
			cover-image {
				width: 530rpx;
			}

			.bt {
				position: relative;
				width: 400rpx;
				height: 88rpx;
				background-color: #48db8d;
				color: #ffffff;
				font-size: 32rpx;
				font-weight: bold;
				text-align: center;
				line-height: 88rpx;
				margin: -95rpx auto 0;
				z-index: 1;
				border-radius: 50rpx;
			}
		}
	}

	// 弹框
	.fail-k {
		width: 490rpx;
		height: 405rpx;
		text-align: center;

		.fail-title {
			padding-top: 120rpx;
			font-size: 36rpx;
			font-weight: bold;
			color: #111827;
		}

		.fail-content {
			margin-top: 29rpx;
			font-size: 24rpx;
			font-weight: bold;
			color: #718096;
		}

		.fail-bt {
			margin: 55rpx auto 0rpx;
			width: 328rpx;
			height: 64rpx;
			background-color: #292c34;
			color: #ffffff;
			border-radius: 35rpx;
			line-height: 64rpx;

		}

	}

	.jnshow-k {
		width: 650rpx;
		height: auto;
		padding-bottom: 40rpx;
		position: relative;

		.fail-icon-img {
			position: absolute;
			right: 25rpx;
			top: 25rpx;
			width: 22rpx;
			height: 22rpx;

			image {
				width: 22rpx;
				height: 22rpx;
			}
		}

		.jnshow-title {
			padding-top: 50rpx;
			font-size: 36rpx;
			font-weight: bold;
			color: #111827;
		}

		.jnshow-content {
			margin-top: 29rpx;
			font-size: 24rpx;
			font-weight: bold;
			color: #718096;
			padding: 0 20rpx;
			white-space: pre-wrap;
			text-align: left;
		}
	}

	.jnshow-k-tb {
		background-color: white;
		border-radius: 35rpx;
	}

	.po-k {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background-color: #FFFFFF;
		z-index: 1000;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.payshow-k {
		width: 720rpx;
		height: auto;
		max-height: 90vh;
		// padding-bottom: 100rpx;
		position: relative;


		.jnshow-title {
			padding-top: 50rpx;
			font-size: 36rpx;
			font-weight: bold;
			color: #111827;
		}

		.jnshow-content {
			margin-top: 29rpx;
			font-size: 24rpx;
			font-weight: bold;
			color: #718096;
			padding: 0 20rpx;
			white-space: pre-wrap;
			text-align: left;
			padding-bottom: 200rpx;
		}

		.payshow-bt {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			bottom: 50rpx;
			font-size: 20rpx;

			button {
				background-color: #f1c16e;
				padding: 20rpx 40rpx;
				color: #ffffff;
			}
		}
	}
</style>